<template>
  <div>
    <el-input
      placeholder="请输入有关课程名得关键字"
      v-model="thName"
      :disabled="false" style="width: 250px;float: left">
    </el-input>
    <el-button type="success" size="small" style="float: left;margin-left: 20px" @click="selectBycName">点击搜索</el-button>
    <el-button type="primary" size="small" style="float: right;margin-left: 20px" @click="onOpen">添加讲师</el-button>
    <el-table
      :data="teacherList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="thName"
        label="讲师名称"
        width="180">
      </el-table-column>
      <el-table-column label="头像展示"   width="250">
        <template slot-scope="scope">
          　　　　<img :src="scope.row.thPic" width="120" height="50" class="head_pic"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="thInfo"
        label="简介"
        width="600">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="updateTeacher(scope.row)">资料修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="passTeacher(scope.row.thId)">删除资料</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
    <div>
      <el-dialog v-bind="$attrs" :visible.sync="dialogVisible" v-on="$listeners" @open="onOpen" @close="onClose" title="Dialog Titile">
        <el-row :gutter="1">
          <el-form ref="teacher" :model="teacher" :rules="rules" size="mini" label-width="100px"
                   label-position="left">
            <el-col :span="12">
              <el-form-item label="讲师名称" prop="thName">
                <el-input v-model="teacher.thName" placeholder="请输入单行文本讲师名称" :maxlength="10" clearable
                          prefix-icon='el-icon-user' :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="17">
              <el-form-item label="上传头像" prop="thPic">
                <el-upload ref="thPic" :file-list="thPicfileList" :action="thPicAction" :on-success="uploadSuccess"
                           :before-upload="thPicBeforeUpload" list-type="picture-card">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="17">
              <el-form-item label="讲师简介" prop="thInfo">
                <el-input v-model="teacher.thInfo" type="textarea" placeholder="请输入讲师简介" :maxlength="300"
                          :autosize="{minRows: 6, maxRows: 6}" :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <div slot="footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="handelConfirm">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>

</template>

<script>
  export default {
    inheritAttrs: false,
    components: {},
    props: [],
    data() {
      return {
        teacher: {
          thId:undefined,
          thName: undefined,
          thPic: null,
          thInfo: undefined,
        },
        teach: {
          thId:undefined,
          thName: undefined,
          thPic: null,
          thInfo: undefined,
        },
        thName:'',
        teacherList: [{
        }],
        currentPage1: 1,
        pageSize:5,
        total:100,
        dialogVisible: false,
        rules: {
          thName: [{
            required: true,
            message: '请输入单行文本讲师名称',
            trigger: 'blur'
          }],
          thInfo: [{
            required: true,
            message: '请输入讲师简介',
            trigger: 'blur'
          }],
        },
        thPicAction: 'http://127.0.0.1:8999/upload',
        thPicfileList: [],
      }
    },
    mounted() {
      this.findPage()
    },
    methods:{
      findPage(){
        this.$axios.get("http://127.0.0.1:8999/teacher/findPage?pageNo="+this.currentPage1+"&pageSize="+this.pageSize+"&thName="+this.thName).then(res=>{
          if(res.data.code==200){
            this.total=res.data.data.total;
            this.teacherList=res.data.data.records
          }});
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.findPage()
      },
      selectBycName(){
        this.findPage()
      },
      onOpen() {
        this.dialogVisible=true
      },
      onClose() {
        this.$refs['teacher'].resetFields()
      },
      close() {
        this.$emit('update:visible', false)
        this.dialogVisible=false
      },
      handelConfirm() {
        this.$refs['teacher'].validate(valid => {
          if (!valid) return
          this.teach.thName=this.teacher.thName
          this.teach.thInfo=this.teacher.thInfo
          this.$axios.post("http://127.0.0.1:8999/teacher/addTeacher",this.teach).then(res=>{
              if(res.data.code==200){
                this.$message.success('添加讲师成功')
                this.findPage()
              }else {
                this.$message.error("添加讲师失败")
              }
          })
          this.close()
        })
      },
      uploadSuccess(res){
       if(res.code==200){
         this.teach.thPic=res.message
         this.$message.success('头像上传成功')
       }else {
         this.$message.error('头像上传失败')
       }
      },
      thPicBeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
      passTeacher(thId){
        this.$confirm('确定要删除吗?', '信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(res=>{
          this.$axios.post("http://127.0.0.1:8999/teacher/passTeacher?thId="+thId).then(res=>{
            if(res.data.code==200){
              this.$message.success('资料删除成功')
              this.findPage()
            }else{
              this.$message.error('资料删除失败')
            }
          })
        })

      },
      updateTeacher(teacher){
        this.onOpen()
        this.teacher=teacher
        this.teach=teacher
      }

    }
  }
</script>
